    <template>
    <div ref="recommend"> 
        <div class="m-header-r flex-box">
            <div class="flex-box flex-f1 flex-ac">
                <div class="head-lr" v-if="!bfUserInfo"></div>
            </div>
            <h1 class="m-h-text">必发彩票</h1>
            <div class="flex-box flex-f1 flex-pe">
                <div class="flex-box flex-ac head-lr" v-if="!bfUserInfo">
                    <div class="head-btn" @click="loginOrRegister('/login')">登录</div>
                    <div>|</div>
                    <div class="head-btn" @click="loginOrRegister('/register')">注册</div>
                </div>
            </div>
        </div>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <div class="bor-b-g">
                <!-- slider开始 -->
                <div class="user-bg"></div>
                <!-- slider结束 -->
                <!-- 公告开始 -->
                <div class="flex-box flex-ac  bg-c-wh bor-b-g">
                    <div class="iconSize-1 notice"></div>
                    <marquee>
                        <marquee-item class="tx-s-14 no-wrap" item-height="1.25rem" v-for="(item, index) in notices" :key="index">{{ item.content }}</marquee-item>
                    </marquee>
                </div>
                <!-- 公告开始 -->
                <!-- 游戏开始  v-show="typeList.length > 1"-->
                <div class="flex-box game-type">
                    <div class="tx-s-14 bg-c-wh" v-for="(item, index) in typeList" :key="index" @click="toggleType(index)"> 
                        <img class="iconSize-4 mar_game" :imgurl="item.logo" :src="loadingImg"/>
                        <p class="tx-c mar-b-25" :class="{'tx-c-r' : picked == index}">{{ item.title }}</p>
                        <div class="flex-box flex-pc arrow-h">
                            <div class="arrow-btm" v-show="picked == index"></div>
                        </div>
                    </div>
                </div> 
                <!-- 游戏结束 -->
                <!-- 彩种开始 -->
                <div class="flex-box flex-wp">
                    <div class="wd-33 bor-b-g tx-c" v-for="(item, index) in typeList[0].childlist" :key="index" @click="toLottery(item.id)"> 
                        <img class="iconSize-4 mar_cp" :imgurl="item.logo" :src="loadingImg"/>
                        <p class="tx-s-14 mar-b">{{ item.title }}</p>
                    </div>
                </div>
                <!-- 彩种结束 -->
            </div> 
        </mescroll-vue>
    </div>
</template> 
<script type="text/ecmascript-6"> 
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import { Marquee, MarqueeItem } from 'vux'
import MescrollVue from 'mescroll.js/mescroll.vue'
import Trans from '../common/js/eventTrans'
import { isDefine } from '../common/js/common'
import { homeData, checkName } from '../common/js/axiosUtil'
import { lotSelObj } from '../common/js/data'
export default {
    data() {
        return { 
            picked : 0,
            recommends : [], // 轮播图片资源
            notices : [], // 公告列表
            typeList : [ {} ],
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置
                lazyLoad: {
                    use: true // 是否开启懒加载,默认false
                },
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            },
            lotType : [
                '', 'cqssc', 'bjpk10', 'xglhc', 'yfssc', 'yfsc', '', 'xjssc', 'bfefc', 'bfwfc'
            ],
            lotPath : lotSelObj,
            loadingImg : require('../common/image/jzsb.png') // 懒加载占位图
        }
    },
    mounted () {
        var _this = this
        Trans.$on('checkUserkName', function (msg) {
            _this.checkUserkName()
        })
    }, 
    methods: {
        // 登录、注册
        loginOrRegister (page) {
            this.$router.push(page) 
        },
        // 购彩
        toLottery (id) {
            // 初始化购彩数据
            this.$store.state.lotData = null
            this.$store.state.lotPlayTab = false
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
            // 是否登录
            if(!isDefine(this.bfUserInfo)){
                this.$router.push('/login')
            }else{
                // 进入购彩界面
                let type = this.lotType[id]
                if(isDefine(type)){
                    this.$store.state.lotType = type
                    this.$router.push('/'+this.lotPath[type])
                }else{
                    this.$toast('尽请期待', 2000)
                }
            }
        },
        // 切换游戏
        toggleType(index) {
            if(index != 0){
                // this.picked = index
                this.$toast('尽请期待', 2000)
            }
        }, 
        // 获取大厅数据
        getHomeData(){
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            homeData(params)
            .then((response)=> { 
                if(response.data.code == "200"){
                    let data = response.data.data
                    this.notices = data.notices 
                    this.typeList = data.typeList 
                    if(isDefine(data.msglist)){ 
                        if(this.$store.state.loginAlert){
                            // 更新loginAlert数据
                            this.$store.state.loginAlert = false
                            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向 
                            this.$vux.confirm.show({
                                // 组件除show外的属性
                                content: data.msglist[0].content, 
                                confirmText: '知道了', 
                                showCancelButton: false,
                                hideOnBlur: true,
                                onCancel () { 
                                },
                                onConfirm () {
                                    if(isDefine(_this.bfUserInfo)){
                                        _this.checkUserkName()
                                    }
                                }
                            })
                        }
                    }
                } else {
                    this.$logAgain(response.data.msg)
                }
                this.mescroll.endSuccess(1)
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
                this.mescroll.endErr()
            });
        },
        // 查询是否已填写真实姓名和qq
        checkUserkName(){
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('uid', this.bfUserInfo.uid)
            checkName(params)
            .then((response)=> {
                if(response.data.code == "-200"){
                    // 更新bindingName数据
                    this.$store.state.bindingName = false
                    this.$router.push('/bindingName')
                }else if(response.data.code == "200"){ 
                        // 更新bindingName数据
                        this.$store.state.bindingName = true
                }else{
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            });
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll 
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback () {
            this.getHomeData()
        }
    },
    components: { 
        MescrollVue,
        Marquee,
        MarqueeItem
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    /*通过fixed固定mescroll的高度*/
    .mescroll
        position: fixed
        top: 2.75rem
        bottom: 3.25rem
        height: auto 
        background: $color-f0
    .noticeBox
        height: 1.25rem
        line-height: 1.25rem
        overflow: hidden
    .notice
        background-image: url('../common/image/sy_icon_gonggao.png')
        margin: .5rem .75rem
    .notioce-tx
        line-height: 1.25rem
        font-size: $fonts-14
    .game-type 
        overflow: auto 
    .game-type::-webkit-scrollbar
        display: none 
    .arrow-h
        height: .5rem
        background: $color-f0
    .arrow-btm 
        width: 1rem
        height: .5rem
        background-size: 100% 100%
        background-image: url('../common/image/bottom.png')
    .mar_game
        margin: 1rem 1.25rem .5rem 1.25rem
    .mar_cp
        margin: .75rem auto
    .mar-b
        margin-bottom: .75rem
    .head-lr
        width: 5rem
        color: white
        font-size: $fonts-14
    .head-btn
        line-height: 2.75rem
        padding: 0 .25rem
</style>
